<template><!--发布成功-->
    <div class="">
        <div class="myarticles_padding" v-show="hasSelectedItems">
            <div class="myarticles_top">
                <div class="myarticles_top_left">已选择{{selectedCount}}项</div>
                <div class="myarticles_top_right">
                    <button class="top_right_list" @click="deleteSelected" :disabled="!hasSelectedItems">批量删除</button>
                    <div class="top_right_list" @click="cancelSelection">取消选择</div>
                </div>
            </div>
        </div>
        <div class="myarticles_content published">
            <div class="myarticles_content_title">
                <div class="content_title_list">
                    <label>
<!--                        <input type="checkbox" v-model="selectAll">-->
                        序号
                    </label>
                </div>
                <div class="content_title_list">分类</div>
                <div class="content_title_list">标题</div>
                <div class="content_title_list">发布站点</div>
                <div class="content_title_list">发布时间</div>
            </div>
            <div class="myarticles_content_tab">
                <div class="content_tab_list" :class="{ on: info.checked }" v-for="(info, index) in infos.data" :key="index">
                    <div class="tab_list_li">
                        <label>
                            <!--  <input type="checkbox" v-model="info.checked">-->
                            {{info.id}}
                        </label>
                    </div>
					<div class="tab_list_li"><a :href="'/index/ArticleList/index.html?member_id='+$store.getters.memberInfo.id+'&class_id='+info.article_class_id" target="_blank">{{ info.articleClass.name }}</a></div>					<a class="tab_list_li" :href="'/index/ArticleList/show.html?id='+info.id" target="_blank"><span class="list_li_btn">{{ info.name }}</span></a>
                    <div class="tab_list_li ApprovalStatus on"><span></span>已发布</div>
                    <div class="tab_list_li">{{info.push_time}}</div>

                </div>
                <div class="not_data not_data2" v-show="infos.data.length === 0">
                  <div class="not_data_icon"><img src="@a/img/bg26.jpg"/></div>
                  <div class="not_data_title">暂无创作任务，点击批量<router-link to="/writing/titleGeneration" class="data_title_btn">创作标题</router-link></div>
                </div>
            </div>
        </div>
        <!-- 预览 -->
        <div class="Preview" v-show="showPreview">
            <div class="Preview_content">
                <div class="Preview_content_title">
                    <div class="content_title_left"><span></span>预览</div>
                    <div class="content_title_right" @click="showPreview = !showPreview"><i class="el-icon-close"></i></div>
                </div>
                <div class="Preview_content_txt">
                  <div class="content_txt_title"> {{editorData.name }}</div>
                  <div ref="htmlContent" v-html="editorData.content"></div>
				  <div class="content_txt_title2" v-if="editorData.keywords"> 关键词：{{editorData.keywords }}</div>
                </div>
                <div class="Preview_content_btn">
                  <div class="content_btn_list close" @click="showPreview = !showPreview">关闭</div>
                  <div class="content_btn_list copy" @click="copyHtml">复制</div>
                </div>
            </div>
        </div>


      <div class="page">
        <el-pagination
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
            :current-page="infos.current_page"
            :page-sizes="infos.per_pages"
            :page-size="infos.per_page"
            layout="total, sizes, prev, pager, next, jumper"
            :total="infos.total">
        </el-pagination>
      </div>
    </div>
</template>

<script>
    import { MessageBox } from 'element-ui';
    export default {
        name: "published",
      props: {
        infos: {
          type: Object,
          default: {
            data: [],
            per_page: 20,
            current_page: 1,
            last_page: 1,
            total: 0
          },
        },
      },
        data() {
            return {
                input: '网站文案策划：如何制定文案目标指南',
                showPreview: false,
              content: '',
              per_pages:[20, 50, 100,200],
                options: [{
                value: '选项1',
                label: '黄金糕'
                }, {
                value: '选项2',
                label: '双皮奶'
                }, {
                value: '选项3',
                label: '蚵仔煎'
                }, {
                value: '选项4',
                label: '龙须面'
                }, {
                value: '选项5',
                label: '北京烤鸭'
                }],
                value: '',
                editorData:{
                  id: 0,
                  name: '',
                  content: '',
                  article_class_id: 0
                },
            };
        },
        components: {

        },
      computed: {
        //全选
        selectAll: {
          get() {
            return this.infos.data.every(info => info.checked)
          },
          set(value) {
            this.infos.data.forEach(info => {
              info.checked = value
            })
          },
        },
        selectedCount() {
          return this.infos.data.filter(info => info.checked).length
        },
        allCount() {
          return this.infos.data.filter(info => info).length
        },
        hasSelectedItems() {
          return this.infos.data.filter(info => info.checked).length > 0;
        },
      },
        methods:{
          preview(id) {
            let that = this;
            let callback = () => {
              that.showPreview = !that.showPreview
            }
		        that.getEditorData(id, callback)
          },
          getEditorData(id, callback){
            let that = this;
            that.axios.get('/api/article/getEditor', {
              params: {
                id: id
              }
            }).then(res => {
              if (res.code == 1) {
                that.editorData = res.result
                callback()
              }
            })
          },
          //复制
          copyHtml() {
            const htmlElement = this.$refs.htmlContent
            const range = document.createRange()
            range.selectNode(htmlElement)
            window.getSelection().removeAllRanges()
            window.getSelection().addRange(range)
            document.execCommand('copy')
            window.getSelection().removeAllRanges()
            this.$message.success('已复制到剪贴板')
          },
          //分页
          handleSizeChange(val) {
            this.$emit('changeSize', val)
          },
          handleCurrentChange(val) {
            this.$emit('changePage', val)
          },
          //取消选择
          cancelSelection() {
            this.selectAll = false;
          },
            //批量删除
            deleteSelected() {
                MessageBox.confirm(`确定删除信息吗？`, '提示', {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                    type: 'warning'
                }).then(() => {
                    this.$message({
                        type: 'success',
                        message: '删除成功!'
                    });
                    // 用户点击确定后执行删除操作
                    for (let i = this.infos.length - 1; i >= 0; i--) {
                        if (this.infos[i].checked) {
                            this.infos.splice(i, 1);
                        }
                    }
                    this.selectAll = false;
                }).catch(() => {
                    this.$message({
                        type: 'info',
                        message: '已取消删除'
                    });
                    // 用户点击取消或者弹窗关闭时不做任何操作
                });
            },
        },
    }
</script>

<style>
  @import "toBereleased.css";
</style>
